<!DOCTYPE html>
<html lang="en">
<head>
  <style type="text/css">
    #box1{
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
  <script type="text/javascript">
    window.onload = function(){
      // 按方向键，div向不同的方向移动
      var box1 = document.getElementById("box1");
      // 定义速度变量，用来控制移动速度
      var speed = 10;
      var dir =0;
      // 键盘按下，控制移动方向
      document.onkeydown = function(event){
          event = event || window.event;
          dir = event.keyCode;
          if(event.ctrlKey){
            speed = 50;
          }
      };
      // 使用定时器来让div不间断的移动
      setInterval(function(){
        /**
           * event.keyCode
           * 左 37
           * 上 38
           * 右 39
           * 下 40
          */
          switch(dir){
            // 向左移动
            case 37:
              box1.style.left = box1.offsetLeft - speed + "px";
              break;
            // 向右移动
            case 39:
              box1.style.left = box1.offsetLeft + speed + "px";
              break;
            // 向上移动
            case 38:
              box1.style.top = box1.offsetTop - speed + "px";
              break;
            // 向下移动
            case 40:
              box1.style.top = box1.offsetTop + speed + "px";
              break;
          }
      },30);
      // 键盘按钮弹起，则停止移动
      document.onkeyup = function(){
        dir = 0;
      }
    };
  </script>
</head>
<body >
  <div id="box1"></div>
</body>
</html>